<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>输入验证</title>  
    <style>  
        .wrong {  
            border: 2px solid red;  
        }  
        .right {  
            border: 2px solid #91B81D;  
        }  
        .error-message {  
            color: red;  
            font-size: 14px;  
        }  
    </style>  
</head>  
<body>  
    账号：<input type="text" /><br><br>  
    密码：<input type="password"/><br><br>  
    <div id="error-message" class="error-message"></div>  
    </body>  

    <script>  
        var inputs = document.getElementsByTagName("input");  
        var errorMessageDiv = document.getElementById("error-message");  

        function applyClass(input, className) {  
           
            input.classList.remove('wrong', 'right');  
              
            input.classList.add(className);  
        }  

        function input_judge(input) {  
            var value = input.value;  
            errorMessageDiv.textContent = ""; // 清除之前的消息  

            if (value.length >= 6 && value.length <= 12) {  
                applyClass(input, "right");    
            } else {  
                applyClass(input, "wrong");  
                errorMessageDiv.textContent = "输入错误：长度须在6到12个字符之间。"; // 显示错误提示  
            }  
        }  

        for (var i = 0; i < inputs.length; i++) {  
            inputs[i].onblur = function() {  
                input_judge(this);  
            };  
        }  
    </script>  
</html>